import React, { Component } from "react";
import {DeviceInfo, Modal, Text,TouchableOpacity, View ,StyleSheet} from "react-native";
import {screen} from '../public/common';
class DiaLog extends Component {
    constructor(props){
        super(props);
        this.state = {
            modalVisible: false
        }
    }
    setModalVisible(visible) {
        this.setState({ modalVisible: visible });
    }
    render() {
        const {Datas,onClose,touchCaoback} = this.props;
        let dataTypes = typeof Datas === 'object';
        let HocData = Datas ? Datas : null;
        return (
            <Modal
                transparent={true}
                animationType="slide"
                visible={this.state.modalVisible}
                onRequestClose={() =>onClose}
            >
                {HocData && dataTypes?<TouchableOpacity
                    style={styles.container}
                    onPress={() => {
                        this.setModalVisible(false);
                    }}
                >
                    {HocData.length != 0 ? <View style={styles.content}>
                        {HocData.map((info,i)=>(
                                 <TouchableOpacity key={i} underlayColor='transparent' style={i==HocData.length-1 ? styles.touchaLast : {}}
                                onPress={()=>{
                                    touchCaoback && touchCaoback(info.key,info.value)
                                }}>
                                <View style={styles.text_container}>
                                    <Text style={styles.text} >{info.value}</Text>
                                </View>
                                <View style={styles.line}/>
                            </TouchableOpacity>
                            ))
                        }
                    </View> : <View style={styles.content}>
                         <TouchableOpacity underlayColor='transparent' style={styles.touchaLast}>
                                <View style={styles.text_container}>
                                    <Text style={styles.text} >没有数据啊!!</Text>
                                </View>
                                <View style={styles.line}/>
                            </TouchableOpacity>
                    </View>}
                </TouchableOpacity>:
                <TouchableOpacity
                    style={styles.container}
                    onPress={() => {
                        this.setModalVisible(false);
                    }}>
                    {HocData()}
                </TouchableOpacity>
                }
        </Modal>
        );
    }
}
export default DiaLog;
const styles = StyleSheet.create({
    container: {
        backgroundColor:'rgba(0,0,0,0.6)',
        flex: 1,
        alignItems: 'center',
        paddingTop: DeviceInfo.isIPhoneX_deprecated ? 30 : 0,
        position:'relative',
    },
    arrow: {
        marginTop: 140,
        color: 'white',
        padding: 0,
        margin: -15
    },
    content: {
        backgroundColor: 'white',
        borderRadius: 3,
        paddingTop: 3,
        paddingBottom: 3,
        marginRight: 3,
        width:screen.width,
        position:'absolute',
        bottom: 0,
    },
    text_container: {
        alignItems: 'center',
        flexDirection: 'row',
    },
    text: {
        width:screen.width,
        fontSize: 16,
        color: 'black',
        fontWeight: '400',
        padding: 15,
        paddingLeft: 26,
        paddingRight: 26,
        textAlign:'center'
    },
    touchaLast:{
        marginBottom:DeviceInfo.isIPhoneX_deprecated ? 20:0
    },
    line: {
        height: 0.3,
        backgroundColor: 'darkgray',
    },
});